<template>
  <div class="whl-tongfu-loan scroll-view">
    <customHeader middleTitle="同福贷" @leftCallBack="goBack" />
    <div class="page-body">
      <mt-swipe :auto="3000" class="whl-banner">
        <mt-swipe-item v-for="item in bannerList" :key="item.id">
          <img :src="item.imgUrl" alt="" class="whl-banner-img" @click="goPage(1, item.router)">
        </mt-swipe-item>
      </mt-swipe>
      <div class="whl-bank">
        <div>
          <img src="../../assets/images/zhangjiakou-tb.png" alt="">
          <h3>张家口银行</h3>
          <span>利息低</span>
          <p>1994人已申请</p>
        </div>
        <div>
          <div>
            <p>
              <span>10-30</span>
              <span>万</span>
            </p>
            <p>额度范围（元）</p>
          </div>
          <div>
            <p>放款时长：1小时</p>
            <p>利息：年化6%</p>
            <p>贷款期限：3-6个月</p>
          </div>
          <p @click="goPage(3)">立即申请</p>
        </div>
      </div>
      <div class="whl-bank">
        <div>
          <img src="../../assets/images/hebei-tb.png" alt="">
          <h3>河北银行</h3>
          <span>利息低</span>
          <p>1909人已申请</p>
        </div>
        <div>
          <div>
            <p>
              <span>10-50</span>
              <span>万</span>
            </p>
            <p>额度范围（元）</p>
          </div>
          <div>
            <p>放款时长：1小时</p>
            <p>利息：年化6%</p>
            <p>贷款期限：一年期</p>
          </div>
          <p @click="goPage(3)">立即申请</p>
        </div>
      </div>
      <div class="whl-bank">
        <div>
          <img src="../../assets/images/pingan-tb.png" alt="">
          <h3>平安银行</h3>
          <span>利息低</span>
          <p>1999人已申请</p>
        </div>
        <div>
          <div>
            <p>
              <span>10-30</span>
              <span>万</span>
            </p>
            <p>额度范围（元）</p>
          </div>
          <div>
            <p>放款时长：1小时</p>
            <p>利息：年化6.5%</p>
            <p>贷款期限：一年期</p>
          </div>
          <p @click="goPage(3)">立即申请</p>
        </div>
      </div>
      <div class="whl-bank">
        <div>
          <img src="../../assets/images/suningyinghang-tb.png" alt="">
          <h3>苏宁银行</h3>
          <span>利息低</span>
          <p>2005人已申请</p>
        </div>
        <div>
          <div>
            <p>
              <span>5-20</span>
              <span>万</span>
            </p>
            <p>额度范围（元）</p>
          </div>
          <div>
            <p>放款时长：1小时</p>
            <p>利息：年化7.5%</p>
            <p>贷款期限：一年期</p>
          </div>
          <p @click="goPage(3)">立即申请</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import customHeader from "../../components/header/header.vue";
import jsBridge from "../../tools/jsBridge";
import {Toast} from "mint-ui";
import { bannerList } from '../../js/banner'

export default {
  components: {customHeader},
  data() {
    return {
      bannerList
    }
  },
  methods: {
    goPage( type, path = '', query = {}) {
      if(type === 1) {
        this.$router.push(
          { path: `/${path}`, query }
        );
      } else if (type === 2) {
        jsBridge.goNativePage({pageName: path});
      } else {
        Toast('近期上线，敬请期待...')
      }
    },
    goBack() {
      if (String(this.$route.query.close) === 'true') {
        jsBridge.closeWindow();
      } else {
        this.$router.back();
      }
    }
  }
}
</script>
<style lang="scss">
@import "../../style/public";
.whl-tongfu-loan {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .whl-banner {
    width: pw(355);
    height: pw(90);
    margin: 0 auto;
    margin-top: pw(10);
    border-radius: pw(10);
    .whl-banner-img {
      width: pw(355);
      height: pw(90);
      border-radius: pw(10);
    }
    .is-active {
      background-color: #fff !important;
    }
    .mint-swipe-indicator {
      background: #fff !important;
    }
  }
  .whl-bank {
    width: pw(355);
    height: pw(120);
    border-radius: pw(10);
    background: #FFF;
    margin: 0 auto;
    margin-top: pw(10);
    &>div:first-child {
      width: 100%;
      height: pw(35);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 0 pw(10);
      padding-top: pw(10);
      &>img {
        width: pw(24);
        height: pw(24);
        border-radius: 50%;
      }
      &>h3 {
        width: auto;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: pw(14);
        color: #333;
        margin-left: pw(5);
      }
      &>span {
        width: pw(38);
        height: pw(14);
        border-radius: pw(4);
        background: linear-gradient(280deg, #F00 0%, #FF7A00 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: pw(10);
        color: #fff;
        margin-left: pw(5);
      }
      &>p {
        width: auto;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex: 1;
        font-size: pw(10);
        color: #FF211A;
      }
    }
    &>div:nth-child(2) {
      width: 100%;
      height: auto;
      overflow: hidden;
      display: flex;
      padding: pw(10);
      box-sizing: border-box;
      &>div:first-child {
        width: pw(110);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-family: HarmonyOS Sans,serif;
        &>p {
          width: 100%;
          height: pw(28);
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #FF211A;
          font-weight: 700;
          box-sizing: border-box;
          &>span {
            width: auto;
            height: 100%;
            display: flex;
            align-items: baseline;
          }
          &>span:first-child {
            font-size: pw(28);
          }
          &>span:nth-child(2) {
            font-size: pw(16);
            align-items: flex-end;
            transform: translateY(pw(3));
          }
        }
        &>p:nth-child(2) {
          width: 100%;
          height: pw(15);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: pw(10);
          font-size: pw(12);
          color: #333;
          font-weight: 400;
        }
      }
      &>div:nth-child(2) {
        width: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #333;
        font-family: PingFang SC,serif;
        font-size: pw(12);
        line-height: pw(20);
        height: pw(55);
        border-left: 1px solid #EEE;
        padding-left: pw(10);
        margin-left: pw(10);
        align-self: center;
        flex: 1;
      }
      &>p:nth-child(3) {
        width: pw(76);
        height: pw(28);
        border-radius: pw(8);
        background: linear-gradient(271deg, #F52222 0%, #D81212 100%);
        color: #FFF;
        font-family: PingFang SC,serif;
        font-size: pw(12);
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: flex-end;
      }
    }

  }
}
</style>
